<template>
    <v-container class="justify-start full-height">
        <p class="title white--text">
            Operation record / 操作记录
            <v-dialog v-model="dialog" max-width="500px">
                <template v-slot:activator="{ on }">
                    <v-btn text color="accent" dark class="float-right" v-on="on">新增记录</v-btn>
                </template>
                <v-card>
                    <v-card-title>
                        <span class="title">{{ formTitle }}</span>
                    </v-card-title>

                    <v-card-text>
                        <v-container>
                            <v-row>
                                <v-col cols="12">
                                    <v-select
                                            v-model="editedItem.consumable_type"
                                            :items="types"
                                            label="耗材类型"
                                    ></v-select>
                                    <!--                                    <v-text-field v-model="editedItem.name" label="耗材类型"></v-text-field>-->
                                </v-col>
                                <v-col cols="12" sm="6" md="4">
                                    <v-text-field v-model="editedItem.specification" label="耗材尺寸/颜色"></v-text-field>
                                </v-col>
                                <v-col cols="12" sm="6" md="4">
                                    <v-text-field v-model="editedItem.consumable_total" label="耗材量"></v-text-field>
                                </v-col>
                                <v-col cols="12">
                                    <v-text-field v-model="editedItem.remark" label="备注"></v-text-field>
                                </v-col>
                            </v-row>
                        </v-container>
                    </v-card-text>

                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="blue darken-1" text @click="close">取消</v-btn>
                        <v-btn color="blue darken-1" text @click="save">保存</v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
        </p>
        <v-data-table
                :headers="headers"
                :items="desserts"
                :options.sync="options"
                :loading="loading"
                :server-items-length="total"
                class="box-shadow radius"
        >
            <template v-slot:item.consumable_type="{ item }">
                <span>{{types[item.consumable_type].text}}</span>
            </template>
            <template v-slot:item.action="{ item }">
                <v-btn
                        text
                        color="accent"
                        small
                        class="mr-2"
                        @click="editItem(item)"
                >
                    编辑
                </v-btn>
                <v-btn
                        text
                        color="accent"
                        small
                        @click="deleteItem(item)"
                >
                    删除
                </v-btn>
            </template>
        </v-data-table>
    </v-container>
</template>

<script>
    import {
        changeCloudPrinterOperatingRecord,
        deleteCloudPrinterOperatingRecord,
        getCloudPrinterOperatingRecord
    } from "../../api/user";

    export default {
        name: "operation-record",
        data() {
            return {
                types: [{
                    text: '纸张',
                    value: 0
                }, {
                    text: '墨水',
                    value: 1
                }, {
                    text: '打印头',
                    value: 2
                }],
                dialog: false,
                headers: [
                    {text: '耗材类型', value: 'consumable_type', sortable: false},
                    {text: '耗材尺寸/颜色', value: 'specification', sortable: false},
                    {text: '耗材量', value: 'consumable_total', sortable: false},
                    {text: '备注', value: 'remark', sortable: false},
                    {text: '操作时间', value: 'create_time', sortable: false},
                    {text: '操作', value: 'action', sortable: false, align: 'center'}
                ],
                desserts: [],
                editedIndex: -1,
                editedItem: {
                    consumable_type: 0,
                    specification: '',
                    consumable_total: '',
                    remark: '',
                    printer_operating_record_id: '',
                },
                defaultItem: {
                    consumable_type: 0,
                    specification: '',
                    consumable_total: '',
                    remark: '',
                    printer_operating_record_id: '',
                },
                loading: false,
                options: {
                    page: 1,
                    itemsPerPage: 10,
                    sortBy: [],
                    sortDesc: []
                },
                total: 10,
                pageSize: 10
            }
        },

        computed: {
            formTitle() {
                return this.editedIndex === -1 ? '录入操作记录' : '编辑操作记录'
            },
        },

        watch: {
            dialog(val) {
                val || this.close()
            },
            options: {
                handler() {
                    this.initialize()
                },
                deep: true,
            },
        },

        created() {
            // this.initialize()
        },

        methods: {
            initialize() {
                this.loading = true;
                return new Promise((resolve, reject) => {
                    let {sortBy, sortDesc, page, itemsPerPage} = this.options;
                    if (itemsPerPage === -1) {
                        itemsPerPage = ''
                        page = ''
                    }
                    getCloudPrinterOperatingRecord({
                        pageSize: itemsPerPage,
                        currentPage: page,
                        sort_name: sortBy.length === 1 && sortDesc.length === 1 ? sortBy[0] : '',
                        // sort: sortBy.length === 1 && sortDesc.length === 1 ? sortDesc[0] ? 'desc' : 'asc' : ''
                        sort: 'desc'
                    }).then(res => {
                        this.loading = false;
                        this.desserts = res.result.showing;
                        this.total = res.result.total;
                        resolve({
                            showing: res.result.showing,
                            total: res.result.total,
                        })
                    }).catch(err => {
                        this.loading = false;
                    })
                })
            },
            editItem(item) {
                this.editedIndex = this.desserts.indexOf(item);
                this.editedItem = Object.assign({}, item);
                this.dialog = true
            },
            deleteItem(item) {
                const index = this.desserts.indexOf(item);
                const result = confirm('确定删除该操作记录吗？')
                if(result) {
                    deleteCloudPrinterOperatingRecord({
                        printer_operating_record_id: item.printer_operating_record_id
                    }).then(res => {
                        this.desserts.splice(index, 1)
                    });
                }
            },
            close() {
                this.dialog = false
                setTimeout(() => {
                    this.editedItem = Object.assign({}, this.defaultItem);
                    this.editedIndex = -1
                }, 300)
            },
            save() {
                if (this.editedIndex > -1) {
                    changeCloudPrinterOperatingRecord(this.editedItem).then(res => {
                        // Object.assign(this.desserts[this.editedIndex], this.editedItem)
                        this.initialize()
                    })
                } else {
                    changeCloudPrinterOperatingRecord(this.editedItem).then(res => {
                        // this.desserts.push(this.editedItem)
                        this.initialize()
                    });
                }
                this.close()
            },
        }
    }
</script>

<style scoped>

</style>
